<template>
  <!--添加开平信息-->
  <div>
    <div class="kaiping-box">
      <div class="kaiping-box-head">
        <div style="display: flex;padding-left: 10px;padding-top: 11px" >
          <a  href="#">
            <div style="display: flex" @click="backForFirst" >
              <i class="icon-kucunchaxun2" style="margin-top: 4px;margin-right: 5px;margin-left: 5px"></i>
              <h3>带钢库存查询</h3>
            </div>
          </a>
        </div>

        <div style="position: absolute;right: 15px;top:10px;display: flex">
          <h4 style="margin-top: 5px"> 条件&nbsp;:&nbsp;&nbsp;</h4>
          <el-select size="small" style="width: 150px;margin-right: 10px" v-model="selectMsg.warehouseId" placeholder="请选择">
            <el-option
              v-for="item in wareHouseList"
              :key="item.warehouseId"
              :label="item.warehouseName"
              :value="item.warehouseId"
              @selection-change="handleSelectionChange" >
            </el-option>
          </el-select>
          <el-select size="small" style="width: 150px;margin-right: 10px" v-model="selectMsg.smallTypeId" placeholder="请选择">
            <el-option
              v-for="item in smallTypeList"
              :key="item.small_type_id"
              :label="item.small_type_name"
              :value="item.small_type_id">
            </el-option>
          </el-select>
          <h4 style="margin-top: 5px"> 实际厚度&nbsp;:&nbsp;&nbsp;</h4>
          <el-input v-model="selectMsg.thickness"  onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  clearable size="small" style="width: 120px;margin-right: 10px" ></el-input>

          <el-button @click="changeSelectMsg" size="small" type="danger" icon="el-icon-search" circle></el-button>
        </div>
      </div>
      <div class="kaiping-box-main">
        <el-table
          v-loading="loading"
          element-loading-text="已经很努力加载了(•́へ•́╬)"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :data="dataList"
          height="530"
          border
          size="small"
          style="width: 100%"
          @selection-change="handleSelectionChange" >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table
                size="mini"
                border
                :data="props.row.detailList"
                style="width: 100%">
                <el-table-column
                  label="产品名称"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{scope.row.small_type_name}} <span style="color: #ff3526">【{{scope.row.specification}}】</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="规格"
                >
                  <template slot-scope="scope">
                    <span style="font-weight: bold;font-size: 14px">{{ checkType(scope.row) }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="库房名称"
                  align="center">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.warehouse_id!==3"  style="font-weight: bold;font-size: 14px" >{{scope.row.warehouse_name}}</el-tag>
                    <el-tag v-if="scope.row.warehouse_id===3"  style="font-weight: bold;font-size: 14px;" type="danger">库存不足</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  label="数量"
                  align="center">
                  <template slot-scope="scope">
                    <span :class="[{'quantitydetail':scope.row.quantity<=0}]" style="font-weight: bold;font-size: 14px">{{ checkUnit(scope.row) }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>

          <el-table-column
            label="产品名称"
            align="center"
            width="382"
          >
            <template slot-scope="scope">
              <span style="font-weight: bold;font-size: 14px">{{scope.row.small_type_name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="实际厚度"
            align="center"
            width="358"
          >
            <template slot-scope="scope">
              <span style="font-weight: bold;font-size: 14px">{{scope.row.thickness}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="库存数量"
            align="center"
            width="400"
          >
            <template slot-scope="scope">
              <span :class="[{'quantitydetail':scope.row.quantity<=0}]" style="font-weight: bold;font-size: 14px">{{scope.row.quantity}}&nbsp;张</span>


            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="选定"
            type="selection"
            width="80">
          </el-table-column>
        </el-table>
        <div style="position: relative">
          <el-pagination
            style="margin-top: 20px"
            background
            align="center"
            :page-size="selectMsg.pageSize"
            :current-page="selectMsg.currentPage"
            layout="prev, pager, next"
            @current-change="changePage"
            :total=total>
          </el-pagination>
          <div style="position:  absolute;right: 30px;top:-2px">
            <el-button type="info" size="small">修改统计宽度</el-button>
            <el-button type="info" size="small">删除</el-button>
          </div>

        </div>
      </div>
    </div>
  </div>

</template>

<script>
import {get, post} from "../../utils/request";
import {INVENTORY_DAIGANG_RECORDING_DATA} from "../../utils/basic-data";

export default {
  name: "InventoryRecordingByDaiGang.vue",
  data(){
    return{
      loading:true,
      total:0,
      unitList:[],
      multipleSelection:[],
      dataList:[],
      wareHouseList:[],
      smallTypeList:[],
      selectMsg:{
        currentPage:1,
        pageSize:INVENTORY_DAIGANG_RECORDING_DATA,
        bigTypeId:3,
        warehouseId:null,
        smallTypeId:null,
        thickness:null,
      }
    }
  },
  created() {
    this.selectMsg.current=1
  },
  mounted() {

    get('/api/v1/small-type-show',{bigTypeId:3}).then(resp=>{
      this.smallTypeList=resp.data
      this.smallTypeList.unshift({small_type_id: 0,small_type_name:'所有带钢'})
      this.selectMsg.smallTypeId=0
    })

    get('/api/v1/warehouse/show/select').then(resp=>{
      this.wareHouseList=resp.data
      this.wareHouseList.unshift({warehouseId: 0,warehouseName:'所有库房'})
      this.selectMsg.warehouseId=0
    })
    get("/api/v1/unit").then(resp=>{
      this.unitList=resp.data
    })

    post("/api/v1/inventory/recording/daigang",this.selectMsg).then(resp=>{
      this.dataList=resp.data.objectList
      this.current=resp.data.currentPage
      this.total=resp.data.total
      this.loading=false
    })
  },
  methods:{
    checkUnit(value) {
      var temp = null
      for (let i = 0; i < this.unitList.length; i++) {
        if (value.unit_id === this.unitList[i].unitId) {
          temp = this.unitList[i].unitName
          return value.quantity + temp;
        }
      }

    },
    checkType(value){
      if (value.big_type_id===1||value.big_type_id===3){
        return value.long1+"*"+value.wide+"*"+value.high
      }else if (value.big_type_id===2){
        return value.long1+"*"+value.wide
      }else {
        return value.specification
      }

    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection)
    },
    backForFirst(){
      this.loading=true
      this.selectMsg.smallTypeId=0
      this.selectMsg.warehouseId=0
      this.selectMsg.thickness=null
      this.changePage(1)
    },
    changePage(value){
      this.loading=true
      this.selectMsg.currentPage=value
      post("/api/v1/inventory/recording/daigang",this.selectMsg).then(resp=>{
        this.dataList=resp.data.objectList
        this.current=resp.data.currenPage
        this.total=resp.data.total
        this.loading=false
      })
    },
    changeSelectMsg(){
      this.loading=true
      this.selectMsg.currentPage=1
      post("/api/v1/inventory/recording/daigang", this.selectMsg).then(resp=>{
        this.dataList=resp.data.objectList
        this.current=resp.data.currenPage
        this.total=resp.data.total
        this.loading=false
      })
    }
  }
}
</script>

<style scoped>
.quantitydetail{
  color: #ff3526;
}
.kaiping-box-main{
  background-color: #f2f2f2;
  height: 590px;
  width: 1270px;
  margin-left: 10px;
  padding-top: 20px;
  border-radius: 20px;
}
a{
  text-decoration: none;
  color: #2c3e50;
}
h4{margin: 0}
h3{
  margin: 0;
}
.kaiping-box-head{
  width: 100%;
  height: 45px;
  position: relative;

  /*background-color: #ff3526;*/
}
.kaiping-box{
  height: 674px;
  margin-top: 10px;
  width: 1290px;
  background-color: white;
  border-radius: 30px;
  box-shadow:  20px 20px 60px #bebebe,
  -20px -20px 60px #ffffff;
}
</style>

